<template>
  <view>
    <u-popup v-model="show" width="75%" closeable>
      <view>
        <view class="shadow"></view>
        <!-- <u-cell-group>
          <view :class="{title: true, active: activeArr.includes(1), firstTile: true}" @click="collapseChange(1)">
            <view class="c-fs28">商品推荐设置</view>
            <u-icon name="arrow-right" color="#000" size="32" v-if="activeArr.includes(1)"></u-icon>
            <u-icon name="arrow-down" color="#000" size="32" v-else></u-icon>
          </view>
          <view>
            <u-checkbox-group @change="jiagecheckChange">
              <u-cell-item :arrow="false" v-for="item in jiage" :key="item.id">
                <u-checkbox
                  class="hhh"
                  shape="square"
                  slot="icon"
                  active-color="#FF6B22"
                  :name="item.id"
                  icon-size="40"
                  label-size="24"
                  v-model="item.checked"
                  >{{ item.name }}</u-checkbox
                >
              </u-cell-item>
            </u-checkbox-group>
          </view>
        </u-cell-group> -->
        <u-cell-group>
          <view :class="{title: true, active: activeArr.includes(2), firstTile: true}" @click="collapseChange(2)">
            <view>价格区间（元）</view>
            <u-icon name="arrow-right" color="#000" size="32" v-if="activeArr.includes(2)"></u-icon>
            <u-icon name="arrow-down" color="#000" size="32" v-else></u-icon>
          </view>
          <view>
            <u-checkbox-group @change="jiagecheckChange">
              <u-cell-item :arrow="false" v-for="item in jiage" :key="item.id" class="hhh">
                <u-checkbox
                  shape="square"
                  slot="icon"
                  active-color="#FF6B22"
                  :name="item.id"
                  icon-size="40"
                  label-size="24"
                  v-model="item.checked"
                  >{{ item.name }}</u-checkbox
                >
              </u-cell-item>
            </u-checkbox-group>
          </view>
        </u-cell-group>
        <u-cell-group>
          <view class="title" :class="{title: true, active: activeArr.includes(3)}" @click="collapseChange(3)">
            <view>品牌设置</view>
            <u-icon name="arrow-right" color="#000" size="32" v-if="activeArr.includes(3)"></u-icon>
            <u-icon name="arrow-down" color="#000" size="32" v-else></u-icon>
          </view>
          <view>
            <u-checkbox-group @change="pinpaicheckChange">
              <u-cell-item :arrow="false" v-for="item in pinpai" :key="item.id" class="hhh">
                <u-checkbox
                  shape="square"
                  slot="icon"
                  active-color="#FF6B22"
                  :name="item.id"
                  icon-size="40"
                  label-size="24"
                  v-model="item.checked"
                  >{{ item.name }}</u-checkbox
                >
              </u-cell-item>
            </u-checkbox-group>
          </view>
        </u-cell-group>
        <u-cell-group>
          <view class="title" :class="{title: true, active: activeArr.includes(4)}" @click="collapseChange(4)">
            <view>功能</view>
            <u-icon name="arrow-right" color="#000" size="32" v-if="activeArr.includes(4)"></u-icon>
            <u-icon name="arrow-down" color="#000" size="32" v-else></u-icon>
          </view>
          <view>
            <u-checkbox-group @change="gongnengcheckChange">
              <u-cell-item :arrow="false" v-for="item in gongneng" :key="item.id" class="hhh">
                <u-checkbox
                  shape="square"
                  slot="icon"
                  active-color="#FF6B22"
                  :name="item.id"
                  icon-size="40"
                  label-size="24"
                  v-model="item.checked"
                  >{{ item.name }}</u-checkbox
                >
              </u-cell-item>
            </u-checkbox-group>
          </view>
        </u-cell-group>
      </view>
    </u-popup>
  </view>
</template>

<script>
  // 公共接口home集合
  import home from '@/services/public'
  export default {
    data() {
      return {
        show: false,
        value: '',
        value1: '',
        activeArr: [],
        changeArr: [],
        gongneng: [],
        pinpai: [],
        jiage: [],
        searchForm: {
          effectId: '',
          brandId: '',
          lePrice: '',
          gePrice: ''
        }
      }
    },
    components: {
      // SaveButton
    },
    methods: {
      // 选中任一checkbox时，由checkbox-group触发
      gongnengcheckChange(e) {
        let arr = []
        this.$set(this.searchForm, 'effectId', '')
        arr.push(e)
        this.$set(this.searchForm, 'effectId', arr.join(','))
        this.$emit('selectChange', this.searchForm)
      },
      // 选中任一checkbox时，由checkbox-group触发
      pinpaicheckChange(e) {
        let arr = []
        this.$set(this.searchForm, 'brandId', '')
        arr.push(e)
        this.$set(this.searchForm, 'brandId', arr.join(','))
        this.$emit('selectChange', this.searchForm)
      },
      jiagecheckChange(e) {
        let arr = []
        this.$set(this.searchForm, 'gePrice', '')
        this.$set(this.searchForm, 'lePrice', '')
        e.forEach(item => {
          let inforObj = this.jiage.find(i => i.id == item)
          arr.push(inforObj)
        })
        let minArr = arr.map(i => i.priceSmall)
        let maxArr = arr.map(i => i.priceBig)
        let priceArr = [...minArr, ...maxArr].sort((a, b) => {
          return a - b
        })
        this.$set(this.searchForm, 'gePrice', priceArr[0] || '')
        this.$set(this.searchForm, 'lePrice', priceArr[priceArr.length - 1] || '')
        this.$emit('selectChange', this.searchForm)
      },
      change(a) {
        if (!this.changeArr.includes(a)) {
          this.changeArr.push(a)
        } else {
          let index = this.changeArr.indexOf(a)
          this.changeArr.splice(index, 1)
        }
      },
      init() {
        this.show = true
      },
      collapseChange(a) {
        if (!this.activeArr.includes(a)) {
          this.activeArr.push(a)
        } else {
          let index = this.activeArr.indexOf(a)
          this.activeArr.splice(index, 1)
        }
      },
      getList() {
        home.effectList().then(data => {
          this.gongneng = data.map(i => {
            i.checked = false
            return i
          })
        })
        home.brandList().then(data => {
          this.pinpai = data.map(i => {
            i.checked = false
            return i
          })
        })
        home.productPriceList().then(data => {
          this.jiage = data.map(i => {
            i.checked = false
            return i
          })
        })
      }
    },
    mounted() {
      this.getList()
    }
  }
</script>

<style lang="scss">
  u-cell-item /deep/ {
    .u-cell {
      padding: 16rpx 32rpx;
    }
  }
</style>
<style scoped>
  .title {
    font-size: 28rpx;
    color: #000;
    font-weight: 600;
    padding-left: 30rpx;
    padding-right: 30rpx;
    display: flex;
    justify-content: space-between;
  }
  .c-fs28 {
    font-size: 28rpx;
  }
  .firstTile {
    padding-top: 100rpx;
  }
  .shadow {
    height: 100rpx;
    background-color: #fff;
    width: 100%;
    position: fixed;
    top: 0;
  }
  .active + view {
    display: none;
  }
  u-radio >>> .uicon-checkbox-mark {
    top: -5px !important;
  }
  .test >>> .u-cell_title {
    font-size: 24rpx;
  }
</style>
